<template>
  <div class="bg-[#fff]">
    <ul class="sort-box">
      <li
        v-for="item in options"
        :class="value == item.value ? 'active' : ''"
        @click="$emit('update:value', item.value)"
      >
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
withDefaults(
  defineProps<{
    value: string;
    options: CustomTab[];
  }>(),
  {}
);
</script>
<style scoped>
.sort-box {
  @apply flex h-[30px] border-solid border-[1px] border-[#E4E4E4] rounded-[5px];
}
.sort-box li {
  @apply flex h-[30px] justify-center items-center flex-1 w-0 text-[14px] text-[#888];
}
.sort-box li.active {
  @apply bg-[#3976CC] text-[#fff]  rounded-[5px];
}
</style>
